@charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    font-family: '微软雅黑','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 16px;
    -webkit-user-drag: none;
    -webkit-text-size-adjust: 100%;
}

a {
    text-decoration: none;
}

input, textarea {
    font-family: '微软雅黑','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 16px;
    -webkit-user-modify: read-write-plaintext-only;
}

a, input, button, textarea, fieldset, ul, span {
    -webkit-tap-highlight-color: rgba(255,255,255,0);
}

li {
    list-style-type: none;
}

input[type=text], textarea, fieldset {
    border: 0;
    outline: 0;
}

.conner_round_vertical_group {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.largerimg {
    cursor: pointer;
}

.nice-select {
    -webkit-tap-highlight-color: transparent;
    background-color: #fff;
    border-radius: 5px;
    border: solid 1px #e8e8e8;
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    height: 42px;
    line-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 30px;
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: auto;
}

.nice-select:hover {
    border-color: #dbdbdb;
}

.nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: #999;
}

.nice-select:after {
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px;
}

.nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
}

.nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none;
}

.nice-select.disabled:after {
    border-color: #cccccc;
}

.nice-select.wide {
    width: 100%;
}

.nice-select.wide .list {
    left: 0 !important;
    right: 0 !important;
}

.nice-select.wideqb {
    margin-left: 13px;
    width: 220px;
    color: black;
}

.nice-select.wideqb .list {
    left: 0 !important;
    right: 0 !important;
}

.nice-select.right {
    float: right;
}

.nice-select.right .list {
    left: auto;
    right: 0;
}

.nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px;
}

.nice-select.small:after {
    height: 4px;
    width: 4px;
}

.nice-select.small .option {
    line-height: 34px;
    min-height: 34px;
}

.nice-select .list {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9;
}

.nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important;
}

.nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 40px;
    list-style: none;
    min-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    background-color: #f6f6f6;
}

.nice-select .option.selected {
    font-weight: bold;
}

.nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default;
}

.no-csspointerevents .nice-select .list {
    display: none;
}

.no-csspointerevents .nice-select.open .list {
    display: block;
}

.clear {
    clear: both;
}

.qbcontainer {
    width: 98%;
    margin: 0px auto 0;
}

.qbcontainer .cz {
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
    font-size: 12px;
}

.qbcontainer .cz img {
    width: 50px;
}

.qbcontainer .cz a {
    width: 50px;
    cursor: pointer;
}

.qbcontainer .cz #qbcz {
    padding-right: 10px;
}

.qbcontainer .cz #qbtx {
    padding-left: 10px;
}

.qbcontainer .je {
    width: 100%;
    text-align: center;
    font-size: 4em;
    padding-top: 30px;
    padding-bottom: 20px;
    color: gold;
    font-weight: bolder;
}

.qbcontainer .je span {
    font-size: 18px;
    color: cadetblue;
}

.qbcontainer .nav {
    width: 100%;
    border: 1px solid #ccc;
}

.qbcontainer .nav span {
    display: block;
    width: 25%;
    text-align: center;
    line-height: 40px;
    color: #666;
    float: left;
    cursor: pointer;
}

.qbcontainer .nav span.active {
    background: #999;
    color: #fff;
}

.qbcontent {
    margin-top: 5px;
    width: 100%;
}

.qbcontent ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border: 1px solid #f1f1f1;
    border-right: 0px;
}

.qbcontent li {
    display: block;
    width: 25%;
    float: left;
    text-align: center;
    border-right: 1px solid #f1f1f1;
    margin-left: -1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.ultitle {
    background: #ccc;
    font-weight: bold;
    border-top: 1px;
    list-style: none;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 20px;
    line-height: 20px;
    border: 1px solid #4a98af;
}

.avatarcontainer {
    width: 100%;
    min-height: 100px;
    max-height: 700px;
}

.sb {
    cursor: pointer
}

#showphoto {
    text-align: center;
}

#showphoto ul {
    list-style: none;
    margin: 0 auto;
    padding-left: 5px;
    width: auto;
}

#showphoto ul li {
    border: 5px solid #e3d6d6;
    margin-top: 5px;
    margin-right: 5px;
    display: inline-block;
    cursor: pointer;
}

#avatarcz {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

#avatarcz button {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

#imgxz {
    background-position: -0px 0;
}

.medall {
    width: 100%;
    height: 60px;
}

.medall li {
    float: left;
    padding-right: 10px;
}

.btn {
    display: block;
    position: relative;
    border: 1px solid;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: .75em 12px;
    width: 100%;
    font-family: '微软雅黑','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 16px;
}

.btn_text {
    display: block;
    color: #fff;
    line-height: 100%;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.btn_red {
    border-color: #bd362f #bd362f #802420;
    background: #eb2a25;
    background: -webkit-gradient(linear,left top,left bottom,from(#eb2a25),to(#911710));
    background: -webkit-linear-gradient(top,#eb2a25,#911710);
    background: -moz-linear-gradient(top,#eb2a25,#911710);
    background: -ms-linear-gradient(top,#eb2a25,#911710);
    background: -o-linear-gradient(top,#eb2a25,#911710);
    background: linear-gradient(top,#eb2a25,#911710);
    -webkit-box-shadow: inset 0 1px rgba(255,255,255,.3),0 1px 1px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 1px rgba(255,255,255,.3),0 1px 1px rgba(0,0,0,.3);
    box-shadow: inset 0 1px rgba(255,255,255,.3),0 1px 1px rgba(0,0,0,.3);
}

.btn_white > .btn_text {
    color: #000;
}

.btn_white {
    border-color: #ccc;
    background: #eee;
    background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1));
    background: -webkit-linear-gradient(top,#fff,#f1f1f1);
    background: -moz-linear-gradient(top,#fff,#f1f1f1);
    background: -ms-linear-gradient(top,#fff,#f1f1f1);
    background: -o-linear-gradient(top,#fff,#f1f1f1);
    background: linear-gradient(top,#fff,#f1f1f1);
    -webkit-text-shadow: 0 1px 1px #fff;
    -moz-text-shadow: 0 1px 1px #fff;
    text-shadow: 0 1px 1px #fff;
}

.btn_white.active {
    background: #fff;
    background: -webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#f6f6f6));
    background: -webkit-linear-gradient(top,#fafafa,#f6f6f6);
    background: -moz-linear-gradient(top,#fafafa,#f6f6f6);
    background: -ms-linear-gradient(top,#fafafa,#f6f6f6);
    background: -o-linear-gradient(top,#fafafa #f6f6f6);
    background: linear-gradient(top,#fafafa,#f6f6f6);
}

.btn_green {
    border-color: #50a428;
    background: #6ebf47;
    background: -webkit-gradient(linear,left top,left bottom,from(#6ebf47),to(#5cb232));
    background: -webkit-linear-gradient(top,#6ebf47,#5cb232);
    background: -moz-linear-gradient(top,#6ebf47,#5cb232);
    background: -ms-linear-gradient(top,#6ebf47,#5cb232);
    background: -o-linear-gradient(top,#6ebf47,#5cb232);
    background: linear-gradient(top,#6ebf47,#5cb232);
    -webkit-text-shadow: 0 1px 1px rgba(0,0,0,.4);
    -moz-text-shadow: 0 1px 1px rgba(0,0,0,.4);
    text-shadow: 0 1px 1px rgba(0,0,0,.4);
}

.btn_green.active {
    background: #50a428;
    background: -webkit-gradient(linear,left top,left bottom,from(#50a428),to(#7fd556));
    background: -webkit-linear-gradient(top,#50a428,#7fd556);
    background: -moz-linear-gradient(top,#50a428,#7fd556);
    background: -ms-linear-gradient(top,#50a428,#7fd556);
    background: -o-linear-gradient(top,#50a428 #7fd556);
    background: linear-gradient(top,#50a428,#7fd556);
}

.btn_black {
    border-color: #2c2727 #2c2727 #1a1919;
    background: #0e3154;
    background: -webkit-gradient(linear,left top,left bottom,from(#2b89d1),to(#1f1a1a));
    background: -webkit-linear-gradient(top,#2b89d1,#1f1a1a);
    background: -moz-linear-gradient(top,#2b89d1,#1f1a1a);
    background: -ms-linear-gradient(top,#2b89d1,#1f1a1a);
    background: -o-linear-gradient(top,#2b89d1,#1f1a1a);
    background: linear-gradient(top,#2b89d1,#1f1a1a);
}

.btn_black.active {
    background: #0e3154;
    background: -webkit-gradient(linear,left top,left bottom,from(#2d2d2d),to(#444));
    background: -webkit-linear-gradient(top,#2d2d2d,#444);
    background: -moz-linear-gradient(top,#444,#2d2d2d);
    background: -ms-linear-gradient(top,#444,#2d2d2d);
    background: -o-linear-gradient(top,#444,#2d2d2d);
    background: linear-gradient(top,#444,#2d2d2d);
}

.btn_blue {
    border-color: #044062;
    background: #396b9e;
    background: -webkit-gradient(linear,left top,left bottom,from(#5f9cc5),to(#396b9e));
    background: -webkit-linear-gradient(top,#5f9cc5,#396b9e);
    background: -moz-linear-gradient(top,#5f9cc5,#396b9e);
    background: -ms-linear-gradient(top,#5f9cc5,#396b9e);
    background: -o-linear-gradient(top,#5f9cc5,#396b9e);
    background: linear-gradient(top,#5f9cc5,#396b9e);
    -webkit-text-shadow: 0 1px 1px #194b7e;
    -moz-text-shadow: 0 1px 1px #194b7e;
    text-shadow: 0 1px 1px #194b7e;
}

.btn_blue.active {
    background: #5393c5;
    background: -webkit-gradient(linear,left top,left bottom,from(#5393c5),to(#6facd5));
    background: -webkit-linear-gradient(top,#5393c5,#6facd5);
    background: -moz-linear-gradient(top,#5393c5,#6facd5);
    background: -ms-linear-gradient(top,#5393c5,#6facd5);
    background: -o-linear-gradient(top,#5393c5,#6facd5);
    background: linear-gradient(top,#5393c5,#6facd5);
}

.btn_grey > .btn_text {
    color: #000;
}

.btn_grey {
    border-color: #cfcfcf;
    background: #fff;
    background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#e6e6e6));
    background: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background: -moz-linear-gradient(top,#fff,#e6e6e6);
    background: -ms-linear-gradient(top,#fff,#e6e6e6);
    background: -o-linear-gradient(top,#fff,#e6e6e6);
    background: linear-gradient(top,#fff,#e6e6e6);
    -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,.5),0 1px 1px rgba(255,255,255,.5);
    -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,.5),0 1px 1px rgba(255,255,255,.5);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.5),0 1px 1px rgba(255,255,255,.5);
}

.btn_small {
    padding: .57em 10px;
    width: auto;
    font-size: 14px;
    vertical-align: middle;
}

.btn_arrow_left {
    border-left: 0;
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    padding-left: 6px;
}

.btn_small.btn_arrow_left:after {
    content: "";
    display: block;
    position: absolute;
    border: 1px solid;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: -1;
    width: 23px;
    height: 23px;
    left: -12px;
    top: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.btn_black:after {
    border-color: #2c2727 #2c2727 #1a1919;
    background: #0e3154;
    background: -webkit-gradient(linear,left top,right bottom,from(#2b89d1),to(#1f1a1a));
    background: -webkit-linear-gradient(left top,#2b89d1,#1f1a1a);
    background: -moz-linear-gradient(left top,#2b89d1,#1f1a1a);
    background: -ms-linear-gradient(left top,#2b89d1,#1f1a1a);
    background: -o-linear-gradient(left top,#2b89d1,#1f1a1a);
    background: linear-gradient(left top,#2b89d1,#1f1a1a);
    -webkit-box-shadow: inset 1px 0 rgba(255,255,255,.1),0 1px rgba(255,255,255,.1);
    -moz-box-shadow: inset 1px 0 rgba(255,255,255,.1),0 1px rgba(255,255,255,.1);
    box-shadow: inset 1px 0 rgba(255,255,255,.1),0 1px rgba(255,255,255,.1);
}

.btn_img, .btn_small .btn_img {
    display: block;
    width: 20px;
    height: 20px;
}

.btn_small .btn_img {
    width: 14px;
    height: 14px;
}

.btn_search .btn_img {
    background: url(../image/title_search_icon.png);
}

.btn_add_white .btn_img {
    background: url(../image/title_add_icon.png);
}

.btn_setting .btn_img {
    background: url(../image/pannel-arrow-down.png);
}

.btn_add_grey .btn_img {
    background: url(../image/chat_bottombar_icon_add.png);
}

.btn_face .btn_img {
    background: url(../image/chat_bottombar_icon_face.png);
}

.btn_hb .btn_img {
    background: url(../image/chat_bottombar_icon_hb.png);
}

.btn_yuyin .btn_img {
    background: url(../image/chat_bottombar_icon_yuyin.png);
}

.btn_photo .btn_img {
    background: url(../image/chat_bottombar_icon_photo.png);
}

.btn_wenzi .btn_img {
    background: url(../image/chat_bottombar_icon_wenzi.png);
}

.btn_icon > .left_icon, .btn_icon > .right_icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    margin: -8px 0 0 0;
}

.btn_icon > .left_icon {
    left: .5em;
}

.btn_icon > .right_icon {
    right: .5em;
}

.btn_white > .left_icon, .btn_white > .right_icon {
    background: #fff;
}

.btn_green > .left_icon, .btn_green > .right_icon {
    background: green;
}

.btn_black > .left_icon, .btn_black > .right_icon {
    background: #000;
}

.btn_blue > .left_icon, .btn_blue > .right_icon {
    background: #00f;
}

.btn_group {
    width: 100%;
}

.btn_group:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.btn_group > .btn + .btn {
    margin-left: -1px;
}

.btn_group > .btn {
    width: 33.3%;
    float: left;
    display: inline-block;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.btn_group > .btn:first-child {
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}

.btn_group > .btn:last-child {
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
}

.btn_group.vertical > .btn + .btn {
    margin-left: 0;
    margin-top: -1px;
}

.btn_group.vertical > .btn {
    width: 100%;
}

.btn_group.vertical > .btn:first-child {
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

.btn_group.vertical > .btn:last-child {
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

.input, .icon_input {
    background: 0;
    padding: .8em;
    width: 100%;
    -moz-border-radius: .6em;
    -webkit-border-radius: .6em;
    border-radius: .6em;
    box-sizing: border-box;
}

.input_white, .icon_input_white {
    color: #0e3154;
    background: #f9f9f9;
    -moz-box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
    -webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
    box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
}

.input_black, .icon_input_black {
    color: #0e3154;
    background: #e3e3e3;
    -moz-box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
    -webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
    box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
}

.input_group > .input, .icon_input_group > .icon_input {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    margin-top: -1px;
}

.input_group > .input:first-child, .icon_input_group > .icon_input:first-child {
    -moz-border-radius: .6em .6em 0 0;
    -webkit-border-radius: .6em .6em 0 0;
    border-radius: .6em .6em 0 0;
}

.input_group > .input:last-child, .icon_input_group > .icon_input:last-child {
    -moz-border-radius: 0 0 .6em .6em;
    -webkit-border-radius: 0 0 .6em .6em;
    border-radius: 0 0 .6em .6em;
}

.icon_input {
    position: relative;
    padding: 0 2em;
}

.icon_input > input {
    background: 0;
    width: 100%;
    padding: .8em 0;
    box-sizing: border-box;
}

.icon_input > .input_icon {
    position: absolute;
    background: gray;
    width: 16px;
    height: 16px;
    left: 6px;
    top: 50%;
    margin-top: -8px;
}

.input_with_del_btn {
    position: relative;
}

.input_del_btn {
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -12px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: gray;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
}

.list, .group_list {
    position: relative;
    margin-top: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    -webkit-box-shadow: 0 1px rgba(255,255,255,.7);
    -moz-box-shadow: 0 1px rgba(255,255,255,.7);
    box-shadow: 0 1px rgba(255,255,255,.7);
}

.list:first-child, .group_list:first-child {
    margin-top: 0;
}

.group_list .list {
    border: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.num_list {
    counter-reset: listnumbering;
}

.num_list .list_text:before {
    counter-increment: listnumbering;
    content: counter(listnumbering) ". ";
}

.list > li {
    position: relative;
    border-top: 1px solid #e3e3e3;
    padding: .3em 12px;
    line-height: 100%;
}

.list > li:first-child {
    border-top-width: 0;
}

.group_list .list > li:first-child {
    border-top-width: 1px;
}

.list > li .list_text, .list_group_title .list_text {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.list_white > li {
    border-color: #ccc;
    background: #f1f1f1;
    background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1));
    background: -webkit-linear-gradient(white,#f1f1f1);
    background: -moz-linear-gradient(white,#f1f1f1);
    background: -ms-linear-gradient(white,#f1f1f1);
    background: -o-linear-gradient(white,#f1f1f1);
    background: linear-gradient(#fff,#f1f1f1);
}

.list_white > li.selected {
    border-color: #2373a5;
    background: #5393c5;
    background: -webkit-gradient(linear,left top,left bottom,from(#5393c5),to(#6facd5));
    background: -webkit-linear-gradient(#5393c5,#6facd5);
    background: -moz-linear-gradient(#5393c5,#6facd5);
    background: -ms-linear-gradient(#5393c5,#6facd5);
    background: -o-linear-gradient(#5393c5,#6facd5);
    background: linear-gradient(#5393c5,#6facd5);
}

.list_white.read_only_list > li {
    background: #eee;
}

.list_white > li > .list_text {
    color: #0e3154;
}

.list_white > li.selected > .list_text {
    color: #fff;
}

.list_icon, .list_icon_big {
    display: block;
    position: absolute;
    top: 50%;
}

.list_icon {
    margin-top: -8px;
    width: 16px;
    height: 16px;
}

.list_icon_big {
    margin-top: -15px;
    width: 30px;
    height: 30px;
}

.list_icon_left {
    left: 12px;
}

.list_icon.list_icon_left + .list_text {
    margin-left: 20px;
}

.list_icon_big.list_icon_left + .list_text {
    margin-left: 34px;
}

.list_icon_right {
    right: 12px;
}

.list_group_title {
    display: block;
    position: relative;
    border-top: 1px solid;
    padding: .9em 12px;
}

.group_list .list {
    margin-top: 0;
}

.list_group_blue_title {
    border-top-color: #456f9a;
    background: #5e87b0;
    background: -webkit-gradient(linear,left top,left bottom,from(#6facd5),to(#497bae));
    background: -webkit-linear-gradient(#6facd5,#497bae);
    background: -moz-linear-gradient(#6facd5,#497bae);
    background: -ms-linear-gradient(#6facd5,#497bae);
    background: -o-linear-gradient(#6facd5,#497bae);
    background: linear-gradient(#6facd5,#497bae);
}

.list_group_white_title {
    border-top-color: #ccc;
    border-width: 1px;
    background: #f1f1f1;
    background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1));
    background: -webkit-linear-gradient(white,#f1f1f1);
    background: -moz-linear-gradient(white,#f1f1f1);
    background: -ms-linear-gradient(white,#f1f1f1);
    background: -o-linear-gradient(white,#f1f1f1);
    background: linear-gradient(#fff,#f1f1f1);
}

.list_group_blue_title > .list_text {
    color: #fff;
}

.list_group_white_title > .list_text {
    color: #0e3154;
}

.list_white > .list_loading_tips, .list_white > .list_load_btn {
    margin-top: -1px;
    padding: 10px 0;
    text-align: center;
}

.list_white > .list_loading_tips {
    background: #eee;
}

.toggle_switch {
    display: inline-block;
    position: relative;
    width: 6em;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.toggle_wrap {
    -moz-border-radius: 3em;
    -webkit-border-radius: 3em;
    border-radius: 3em;
    overflow: hidden;
}

.toggle_text {
    width: 200%;
    height: 100%;
}

.toggle_text > span {
    width: 50%;
    height: 100%;
    float: left;
    text-align: center;
    font-weight: 700;
    -moz-border-radius: 3em;
    -webkit-border-radius: 3em;
    border-radius: 3em;
    line-height: 2.5em;
}

.toggle_text > span:first-child {
    text-indent: -1.5em;
    cursor: pointer;
}

.toggle_text > span:last-child {
    text-indent: 1.5em;
    margin-left: -2.5em;
    opacity: 0;
}

.toggle_text_blue {
    color: #fff;
    background: #5393c5;
    background: -webkit-gradient(linear,left top,left bottom,from(#5393c5),to(#6facd5));
    background: -webkit-linear-gradient(#5393c5,#6facd5);
    background: -moz-linear-gradient(#5393c5,#6facd5);
    background: -ms-linear-gradient(#5393c5,#6facd5);
    background: -o-linear-gradient(#5393c5,#6facd5);
    background: linear-gradient(#5393c5,#6facd5);
}

.toggle_text_white {
    color: #0e3154;
    background: #d6d6d6;
    background: -webkit-gradient(linear,left top,left bottom,from(#d0d0d0),to(#dfdfdf));
    background: -webkit-linear-gradient(#d0d0d0,#dfdfdf);
    background: -moz-linear-gradient(#d0d0d0,#dfdfdf);
    background: -ms-linear-gradient(#d0d0d0,#dfdfdf);
    background: -o-linear-gradient(#d0d0d0,#dfdfdf);
    background: linear-gradient(#d0d0d0,#dfdfdf);
}

.toggle_text_black {
    color: #fff;
    background: #0e3154;
    background: -webkit-gradient(linear,left top,left bottom,from(#202020),to(#2c2c2c));
    background: -webkit-linear-gradient(top,#202020,#2c2c2c);
    background: -moz-linear-gradient(top,#202020,#2c2c2c);
    background: -ms-linear-gradient(top,#202020,#2c2c2c);
    background: -o-linear-gradient(top,#202020,#2c2c2c);
    background: linear-gradient(top,#202020,#2c2c2c);
    filter: progid:DXimageTransform.Microsoft.gradient(startColorstr='#202020',endColorstr='#2c2c2c',GradientType=0);
}

.toggle_text_deepblue {
    color: #fff;
    background: #295b8e;
    background: -webkit-gradient(linear,left top,left bottom,from(#295b8e),to(#3e79b5));
    background: -webkit-linear-gradient(top,#295b8e,#3e79b5);
    background: -moz-linear-gradient(top,#295b8e,#3e79b5);
    background: -ms-linear-gradient(top,#295b8e,#3e79b5);
    background: -o-linear-gradient(top,#295b8e,#3e79b5);
    background: linear-gradient(top,#295b8e,#3e79b5);
    filter: progid:DXimageTransform.Microsoft.gradient(startColorstr='#295b8e',endColorstr='#3e79b5',GradientType=0);
}

.toggle_handler {
    -moz-border-radius: 3em;
    -webkit-border-radius: 3em;
    border-radius: 3em;
    display: block;
    position: absolute;
    right: .1em;
    top: .1em;
    width: 2.3em;
    height: 2.3em;
    z-index: 10;
    cursor: pointer;
}

.toggle_handler_white {
    background: #EEE;
    background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1));
    background: -webkit-linear-gradient(white,#f1f1f1);
    background: -moz-linear-gradient(white,#f1f1f1);
    background: -ms-linear-gradient(white,#f1f1f1);
    background: -o-linear-gradient(white,#f1f1f1);
    background: linear-gradient(#fff,#f1f1f1);
    -moz-box-shadow: 4px rgba(0,0,0,.3);
    -webkit-box-shadow: 4px rgba(0,0,0,.3);
    box-shadow: 4px rgba(0,0,0,.3);
}

.toggle_handler_black {
    background: #0e3154;
    background: -webkit-gradient(linear,left top,left bottom,from(#2b89d1),to(#383838));
    background: -webkit-linear-gradient(top,#2b89d1,#383838);
    background: -moz-linear-gradient(top,#2b89d1,#383838);
    background: -ms-linear-gradient(top,#2b89d1,#383838);
    background: -o-linear-gradient(top,#2b89d1,#383838);
    background: linear-gradient(top,#2b89d1,#383838);
    filter: progid:DXimageTransform.Microsoft.gradient(startColorstr='#2b89d1',endColorstr='#383838',GradientType=0);
}

.toggle_handler_blue {
    background: #396b9e;
    background: -webkit-gradient(linear,left top,left bottom,from(#5f9cc5),to(#396b9e));
    background: -webkit-linear-gradient(top,#5f9cc5,#396b9e);
    background: -moz-linear-gradient(top,#5f9cc5,#396b9e);
    background: -ms-linear-gradient(top,#5f9cc5,#396b9e);
    background: -o-linear-gradient(top,#5f9cc5,#396b9e);
    background: linear-gradient(top,#5f9cc5,#396b9e);
    filter: progid:DXimageTransform.Microsoft.gradient(startColorstr='#5f9cc5',endColorstr='#396b9e',GradientType=0);
}

.toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -10px;
    width: 58px;
    height: 20px;
    border: 1px solid #999;
    border-radius: 999px;
}

.toggle_slide {
    border-radius: 999px;
    height: 100%;
    overflow: hidden;
}

.toggle_slide_inner {
    margin-left: 0;
    width: 96px;
    height: 100%;
    -webkit-transition: all 2s linear 1s;
}

.toggle_on, .toggle_off, .toggle_blob {
    float: left;
    height: 100%;
}

.toggle_on, .toggle_off {
    width: 48px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-indent: 12px;
}

.toggle_on {
    border-radius: 999px 0 0 999px;
    background: #037bda;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,.2);
}

.toggle_off {
    margin-left: -10px;
    box-shadow: inset -1px 1px 2px rgba(0,0,0,.2);
    border-radius: 0 999px 999px 0;
    color: #828282;
    background: #efefef;
}

.toggle_on:after {
    background: #1189f1;
    background: -moz-linear-gradient(top,#1189f1 0,#3797ef 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#1189f1),color-stop(100%,#3797ef));
    background: -webkit-linear-gradient(top,#1189f1 0,#3797ef 100%);
    background: -o-linear-gradient(top,#1189f1 0,#3797ef 100%);
    background: -ms-linear-gradient(top,#1189f1 0,#3797ef 100%);
    background: linear-gradient(to bottom,#1189f1 0,#3797ef 100%);
    filter: progid:DXimageTransform.Microsoft.gradient(startColorstr='#1189f1',endColorstr='#3797ef',GradientType=0);
    height: 50%;
    content: '';
    margin-top: -19%;
    display: block;
    border-radius: 999px;
    margin-left: 10%;
}

.toggle_off:after {
    background: #fafafa;
    background: -moz-linear-gradient(top,#fafafa 0,#fdfdfd 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fafafa),color-stop(100%,#fdfdfd));
    background: -webkit-linear-gradient(top,#fafafa 0,#fdfdfd 100%);
    background: -o-linear-gradient(top,#fafafa 0,#fdfdfd 100%);
    background: -ms-linear-gradient(top,#fafafa 0,#fdfdfd 100%);
    background: linear-gradient(to bottom,#fafafa 0,#fdfdfd 100%);
    filter: progid:DXimageTransform.Microsoft.gradient(startColorstr='#fafafa',endColorstr='#fdfdfd',GradientType=0);
    height: 50%;
    content: '';
    margin-top: -19%;
    display: block;
    margin-right: 10%;
    border-radius: 999px;
}

.toggle_blob {
    position: relative;
    z-index: 1;
    margin-left: -10px;
    width: 20px;
    border-radius: 50px;
    background: #d1d1d1;
    background: -moz-linear-gradient(top,#d1d1d1 0,#fafafa 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#d1d1d1),color-stop(100%,#fafafa));
    background: -webkit-linear-gradient(top,#d1d1d1 0,#fafafa 100%);
    background: -o-linear-gradient(top,#d1d1d1 0,#fafafa 100%);
    background: -ms-linear-gradient(top,#d1d1d1 0,#fafafa 100%);
    background: linear-gradient(to bottom,#d1d1d1 0,#fafafa 100%);
    filter: progid:DXimageTransform.Microsoft.gradient(startColorstr='#d1d1d1',endColorstr='#fafafa',GradientType=0);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.4),inset 0 0 0 2px white,inset 0 0 3px rgba(0,0,0,.5);
}

header, footer {
    z-index: 0;
}

footer.fix_bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
}

header > h1, footer > h1 {
    padding: .75em .45em;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    text-align: center;
    -webkit-box-flex: 15;
    -moz-box-flex: 15;
    box-flex: 15;
}

.black header, .black footer {
    background: #0e3154;
    color: #fff;
    background: -webkit-gradient(linear,left top,left bottom,from(#2b89d1),to(#1f1a1a));
    background: -webkit-linear-gradient(#2b89d1,#1f1a1a);
    background: -moz-linear-gradient(#2b89d1,#1f1a1a);
    background: -ms-linear-gradient(#2b89d1,#1f1a1a);
    background: -o-linear-gradient(#2b89d1,#1f1a1a);
    background: linear-gradient(#2b89d1,#1f1a1a);
}

.blue header, .blue footer {
    background: #5e87b0;
    color: #fff;
    background: -webkit-gradient(linear,left top,left bottom,from(#6facd5),to(#497bae));
    background: -webkit-linear-gradient(#6facd5,#497bae);
    background: -moz-linear-gradient(#6facd5,#497bae);
    background: -ms-linear-gradient(#6facd5,#497bae);
    background: -o-linear-gradient(#6facd5,#497bae);
    background: linear-gradient(#6facd5,#497bae);
}

.white header, .white footer {
    background: #bbb;
    color: #0e3154;
    background: -webkit-gradient(linear,left top,left bottom,from(#ddd),to(#bbb));
    background: -webkit-linear-gradient(#ddd,#bbb);
    background: -moz-linear-gradient(#ddd,#bbb);
    background: -ms-linear-gradient(#ddd,#bbb);
    background: -o-linear-gradient(#ddd,#bbb);
    background: linear-gradient(#ddd,#bbb);
}

.content {
    padding: .5em .5em 1em;
}

.tab {
    overflow: hidden;
}

.tab_head:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.tab_head > li {
    display: inline-block;
    float: left;
    padding: .75em 12px;
    width: 25%;
    border-left: 1px solid #fff;
    border-right: 1px solid #d8d8d8;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

.tab_head > li:first-child {
    border-left: 0;
}

.tab_head > li:last-child {
    border-right: 0;
}

.tab_head > li.active {
    margin: 0;
    background: #c2c2c2;
    background: -webkit-linear-gradient(top,#c2c2c2,#e5e5e5);
    background: -webkit-linear-gradient(top,#c2c2c2,#e5e5e5);
    background: -moz-linear-gradient(top,#c2c2c2,#e5e5e5);
    background: -ms-linear-gradient(top,#c2c2c2,#e5e5e5);
    background: -o-linear-gradient(top,#c2c2c2,#e5e5e5);
    background: linear-gradient(top,#c2c2c2,#e5e5e5);
    -webkit-box-shadow: inset 0 1px 1px #a4a4a4,inset 1px 0 1px #b2b2b2;
    -moz-box-shadow: inset 0 1px 1px #a4a4a4,inset 1px 0 1px #b2b2b2;
    box-shadow: inset 0 1px 1px #a4a4a4,inset 1px 0 1px #b2b2b2;
}

.tab_head {
    border: 1px solid #afafaf;
    border-bottom-color: #d2d2d2;
    background: #f1f1f1;
    background: -webkit-linear-gradient(top,#f1f1f1,#e5e5e5);
    background: -webkit-linear-gradient(top,#f1f1f1,#e5e5e5);
    background: -moz-linear-gradient(top,#f1f1f1,#e5e5e5);
    background: -ms-linear-gradient(top,#f1f1f1,#e5e5e5);
    background: -o-linear-gradient(top,#f1f1f1,#e5e5e5);
    background: linear-gradient(top,#f1f1f1,#e5e5e5);
    -webkit-box-shadow: inset 0 0 1px #cdcdcd,0 1px 1px #fbfbfb;
    -moz-box-shadow: inset 0 0 1px #cdcdcd,0 1px 1px #fbfbfb;
    box-shadow: inset 0 0 1px #cdcdcd,0 1px 1px #fbfbfb;
}

.tab_body > li {
    display: none;
}

.tab_animate > .tab_body, .tab_swipe > .tab_body {
    width: 100%;
}

.tab_animate > .tab_body > li, .tab_swipe > .tab_body > li {
    display: block;
}

.switch {
    display: inline-block;
    width: 3.5em;
    height: 1.5em;
    position: relative;
}

.switch > span {
    position: absolute;
    top: 50%;
    left: 1.9em;
    margin-top: -.7em;
    width: 1.4em;
    height: 1.4em;
    -webkit-border-radius: 1.6em;
    border-radius: 1.6em;
    pointer-events: none;
    -webkit-transition: left .1s linear;
    -o-transition: left .1s linear;
    transition: left .1s linear;
}

.switch > input:checked ~ span {
    left: .21em;
}

.switch > input {
    margin: 0;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 6em;
    border-radius: 6em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    cursor: pointer;
}

.switch-white > input {
    background-image: -webkit-linear-gradient(#d0d0d0,#dfdfdf);
    background-image: -o-linear-gradient(#d0d0d0,#dfdfdf);
    background-image: linear-gradient(#d0d0d0,#dfdfdf);
}

.switch-white > input:checked {
    background-image: -webkit-linear-gradient(#5393c5,#6facd5);
    background-image: -o-linear-gradient(#5393c5,#6facd5);
    background-image: linear-gradient(#5393c5,#6facd5);
}

.switch-white > span {
    background-image: -webkit-linear-gradient(white,#f1f1f1);
    background-image: -o-linear-gradient(white,#f1f1f1);
    background-image: linear-gradient(#fff,#f1f1f1);
}

body {
    background: url(../image/bg.png);
    background-size: 5px 5px;
}

.hide {
    display: none;
}

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

header, footer {
    position: relative;
}

nav ul {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
}

nav li {
    position: relative;
    overflow: hidden;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    height: 50px;
    border-right: 1px solid #1f1a1a;
    border-left: 1px solid #2b89d1;
    color: #ccc;
    font-size: 14px;
    text-align: center;
    text-shadow: 0 -1px 0 #000;
    -moz-box-shadow: inset 0 0 10px transparent;
    -webkit-box-shadow: inset 0 0 10px transparent;
    box-shadow: inset 0 0 10px transparent;
    cursor: pointer;
}

nav li a {
    display: inline-block;
    overflow: hidden;
    height: 100%;
    position: relative;
}

nav li:first-child {
    border-left: 0;
}

nav li:last-child {
    border-right: 0;
}

nav li.selected {
    background: #0e3154;
    border-left-color: #1f1a1a;
    color: #fff;
    text-shadow: 0 1px 0 #000;
    -webkit-box-shadow: inset 0 0 10px #111;
    -moz-box-shadow: inset 0 0 10px #111;
    box-shadow: inset 0 0 10px #111;
}

nav a .icon {
    display: inline-block;
    width: 34px;
    height: 34px;
    background-size: 100% 100%;
}

nav li.point a:after, .list_item.notify .avatar:after {
    content: '';
    display: block;
    position: absolute;
    background-image: url(../image/systemmsg_unread.png);
    background-size: 100% 100%;
}

.list_item.notify .avatar:after {
    top: -9px;
    right: -9px;
    width: 18px;
    height: 18px;
}

nav li.point a:after {
    top: 2px;
    right: 0;
    width: 12px;
    height: 12px;
}

.clearfix:after {
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    font-size: 0;
}

.unread .point {
    display: block;
}

.contact .icon {
    background-image: url(../image/tab_icon_conversation.png);
}

.conversation .icon {
    background-image: url(../image/tab_icon_contact.png);
}

.plugin .icon {
    background-image: url(../image/tab_icon_plugin.png);
}

.setup .icon {
    background-image: url(../image/tab_icon_setup.png);
}

.selected.contact .icon {
    background-image: url(../image/tab_icon_conversation_selected.png);
}

.selected.conversation .icon {
    background-image: url(../image/tab_icon_contact_selected.png);
}

.selected.plugin .icon {
    background-image: url(../image/tab_icon_plugin_selected.png);
}

.selected.setup .icon {
    background-image: url(../image/tab_icon_setup_selected.png);
}

#nav_tab a span {
    display: block;
    position: relative;
    bottom: 2px;
    width: 100%;
    font-size: 12px;
}

.btn_left, .btn_right {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    margin-top: 5px;
    margin-bottom: 7px;
    cursor: pointer;
}

.btn_left {
    margin-left: 15px;
}

.btn_right {
    margin-right: 10px;
}

.btn_left.btn_arrow_left {
    margin-left: 25px;
}

.btn_img {
    margin: 0 4px;
    background-size: 100% 100%!important;
}

.btn_small.btn_arrow_left:after {
    border: 1px solid #000!important;
}

.btn_small {
    padding: 6px 10px!important;
    display: block;
}

.btn_photo, .btn_yuyin, .btn_wenzi, .btn_face,.btn_hb {
    padding: 5px;
}

#yuyin_send_dh {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    height: 150px;
    width: 150px;
    resize: none;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    text-align: center;
    background-image: url(../image/yuyin.gif);
    background-size: contain;
    position: relative;
    margin: 0 auto;
    z-index: 1000;
    top: 50%;
    margin-top: -150px;
    display: none;
}

.panel {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
}

.panel header {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    height: 45px;
    width: 100%;
}

.panel footer {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

.panel.selected {
    display: block;
}

.panel_body_container {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    top: 0;
}

.panel_body {
    width: 100%;
    min-height: 100%;
    position: relative;
}

.btn_text {
    max-width: 100px;
    height: 20px;
    line-height: 20px;
}

.text_ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.padding_20 {
    padding-right: 30px;
    padding-left: 20px;
}

.loginout {
    background: #f74634!important;
    background: -moz-linear-gradient(top,#f74634,#ce2715)!important;
    background: -webkit-gradient(linear,left top,left bottom,from(#f74634),to(#ce2715))!important;
    background: -webkit-linear-gradient(#f74634,#ce2715)!important;
    background: -ms-linear-gradient(#f74634,#ce2715)!important;
    background: -o-linear-gradient(#f74634,#ce2715)!important;
    background: linear-gradient(#f74634,#ce2715)!important;
    text-shadow: 0 0 10px #969696;
    color: #fff;
    text-align: center;
}

.setting-account {
    padding-top: 20px;
}

#about_qq_all {
    display: none;
}

.nav_tab_head {
    width: 100%;
}

.group_list {
    width: 100%;
}

#current_chat_list {
    width: 100%;
}

#d_list {
    width: 100%;
}

#g_list {
    width: 100%;
}

.bgAllimage {
    display: none;
}

.accountHeader {
    display: none;
}

.newMaskAll {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #575757;
    z-index: 10020;
    left: 0;
}

.newMaskText {
    top: 30%;
    position: absolute;
    width: 100%;
    color: #fff;
    font-size: 1.7em;
    text-align: center;
}

.newMaskLogo {
    background: #fff;
    color: #000;
    position: absolute;
    width: 100%;
    top: 41%;
    text-align: center;
    margin: 20px 0;
    padding: 30px 0;
    height: 97px;
}

.newMaskLogo a {
    width: 246px;
    height: 80px;
    display: inline-block;
    position: relative;
    margin: 0 auto;
    margin-left: 50px;
}

.newMaskChrome {
    background: url(../image/chrome_logo.png) no-repeat;
}

.newMaskFirefox {
    background: url(../image/ff_logo.png) no-repeat;
}

.btn_left {
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
}

.suggestion, .suggesapp {
    display: none;
}

@-webkit-keyframes fadeInOut {
    0% {
        opacity: 0;
    }

    25% {
        opacity: .45;
    }

    50% {
        opacity: .85;
    }

    75% {
        opacity: 1;
    }
}

.contact_null_btn {
    opacity: 0!important;
}

.icons_top {
    position: absolute;
    left: 75px;
    top: 14px;
}

.icons_list {
    padding-top: 3px;
}

.icons_list a {
    text-indent: -9999px;
    float: left;
    margin-right: 2px;
    width: 13px;
    height: 15px;
    background-image: url(../image/levelx.png);
    background-repeat: no-repeat;
}

.icons_list .sun {
    background-position: 0 0;
}

.icons_list .moon {
    background-position: -13px 0;
}

.icons_list .star {
    width: 12px;
    background-position: -26px 0;
}

.icons_list .vips {
    width: 43px;
    background-position: -40px 0;
}

.icons_list .vipe {
    width: 43px;
    background-position: -83px 0;
}

@media  all  and (min-width: 1000px) {
    body {
        background: url(../image/fullbody.png);
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
    }

    .qq_face_area ul li i {
        width: 100px;
        height: 100px;
        display: block;
        float: left;
    }

    .btn {
        cursor: pointer!important;
    }

    .clickAble {
        cursor: pointer;
    }

    .bgAllImage {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        -webkit-animation-name: fadeInOut;
        -webkit-animation-timing-function: ease-out;
        -webkit-animation-duration: 2s;
        -webkit-animation-direction: alternate;
    }

    #main_container {
        width: 280px;
        height: 100%;
        float: left;
    }

    .wrap {
        width: 1000px;
        height: 100%;
        margin: 0 auto;
    }

    .container {
        position: relative;
        width: 700px;
        height: 100%;
        float: left;
        margin-left: 20px;
    }

    .panel {
        background: 0;
        transition: none!important;
        -webkit-transition: none!important;
        transform: none!important;
        -webkit-transform: none!important;
    }

    .main-panel {
        position: relative;
        display: block!important;
        width: 280px;
        background: #fff;
        border-radius: 7px;
        -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,.7);
        -moz-box-shadow: 2px 2px 6px rgba(0,0,0,.7);
        box-shadow: 2px 2px 6px rgba(0,0,0,.7);
        height: 80%;
        top: 12%;
        -moz-transition: none!important;
        -webkit-transition: none!important;
        transition: none!important;
        -webkit-transform: none!important;
        -moz-transform: none!important;
        transform: none!important;
    }

    .chat-panel {
        width: 100%;
        height: 80%;
        top: 12%;
    }

    .profile-panel {
        z-index: 10009;
        top: 12%;
        left: 0;
        height: 80%;
        width: 100%;
    }

    .search-panel {
        z-index: 10002;
        top: 12%;
        height: 80%;
    }

    .member-panel, .record-panel, .plugin-displayer-panel {
        z-index: 100010;
        top: 12%;
        left: 0;
        height: 80%;
        width: 100%;
    }

    .profile {
        border-radius: 0 0 6px 6px;
    }

    .member_nick {
        line-height: 23px;
        height: 23px;
        overflow: hidden;
        padding-right: 5px!important;
    }

    .member_signature {
        padding-right: 6px!important;
    }

    .panel_body {
        width: 100%;
        min-height: 100%;
        position: relative;
        background: #ededed;
    }

    .main-panel .panel_body {
        background: transparent;
    }

    .chat_container {
        background: rgba(0,0,0,.5)!important;
        width: 100%;
        min-height: 100%;
    }

    .chat_nick {
        font-size: 15px;
        margin: 0 0 10px;
        text-shadow: 1px 1px 1px #fff;
    }

    .list > li {
        position: relative;
        border-top: 1px solid #e3e3e3;
        padding: .15em 1px;
        line-height: 100%;
        cursor: pointer;
    }

    .avatar {
        width: 40px;
        height: 40px;
        margin: 8px!important;
        position: relative;
    }

    .avatar .group_mask {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 10px;
        height: 10px;
        background: url(../image/) -108px 0 no-repeat;
    }

    .panel header {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        box-orient: horizontal;
        height: 45px;
        width: 100%;
        border-radius: 6px 6px 0 0;
    }

    .panel footer {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        border-radius: 0 0 6px 6px;
        -webkit-border-radius: 0 0 6px 6px;
        -moz-border-radius: 0 0 6px 6px;
    }

    #session {
        border-radius: 0 0 0 6px;
        -webkit-border-radius: 0 0 0 6px;
        -moz-border-radius: 0 0 0 6px;
    }

    .accountHeader {
        z-index: 10001;
        position: absolute;
        display: block;
        width: 100%;
        top: -50px;
    }

    .accountHeader .avatar_wrap {
        width: 40px;
        height: 40px;
        left: 20px;
        top: -11px;
        position: absolute;
        border: 3px solid #fff;
        box-shadow: 1px 1px 5px #000;
        -webkit-box-shadow: 1px 1px 5px #000;
        -moz-box-shadow: 1px 1px 5px #000;
    }

    .accountHeader .user_nick, .accountHeader .user_shuoshuo {
        margin-left: 77px;
        top: -9px;
        font-size: 16px;
        position: absolute;
        text-shadow: 0 0 3px snow,0 0 3px snow,0 0 3px snow,0 0 3px snow;
        overflow: hidden;
        height: 22px;
        width: 148px;
    }

    .accountHeader .user_shuoshuo {
        top: 4px;
        font-size: 12px;
    }

    .state_online, .state_away, .state_busy, .state_hidden, .state_callme, .state_offline, .state_silent {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 10px;
        height: 10px;
        background-image: url(../image/state_sprite.gif);
        background-repeat: no-repeat;
    }

    .state_online {
        background-position: 0 0;
    }

    .state_away {
        background-position: -18px 0;
    }

    .state_busy {
        background-position: -36px 0;
    }

    .state_hidden {
        background-position: -54px 0;
    }

    .state_callme {
        background-position: -72px 0;
    }

    .state_offline {
        background-position: -90px 0;
    }

    .state_silent {
        background-position: -108px 0;
    }

    .wallpaper-ctrl {
        position: absolute;
        bottom: -44px;
    }

    .wallpaperImg {
        width: 19px;
        height: 19px;
        margin: 0 3px;
        overflow: hidden;
        background: url(../image/arrow.png) no-repeat;
        display: inline-block;
        text-decoration: none;
    }

    .pre {
        background-position: -2px -2px;
    }

    .pre:hover {
        background-position: -3px -42px;
    }

    .next {
        background-position: -25px -2px;
    }

    .next:hover {
        background-position: -26px -42px;
    }

    .suggesapp {
        position: absolute;
        right: 0;
        font-size: 12px;
        background: rgba(0,0,0,.5);
        padding: 2px 0;
        border-radius: 10px;
        bottom: -40px;
        display: block;
        color: #000;
        width: 80px;
        text-align: center;
        left: 50%;
        margin-left: 30px;
    }

    .suggesapp a {
        color: #fff;
    }

    .suggestion {
        position: absolute;
        right: 0;
        font-size: 12px;
        background: rgba(0,0,0,.5);
        padding: 2px 0;
        border-radius: 10px;
        bottom: -40px;
        display: block;
        color: #000;
        width: 80px;
        text-align: center;
        left: 50%;
        margin-left: -70px;
    }

    .suggestion a {
        color: #fff;
    }

    .chat_toolbar {
        border-radius: 0 0 5px 5px;
    }
}

.guide-tips {
    margin: 30px auto 0;
    display: none;
    text-align: center;
}

.guide-tips h2 {
    margin: 20px 0;
    font-size: 2em;
}

.guide-tips .tips {
    font-size: 13px;
    color: #666;
}

.guide-tips .tips-image {
    margin-top: 20px;
    float: left;
}

.guide-tips .login-tips {
    padding: 20px 0;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.guide-tips .login-tips .btn {
    cursor: pointer;
    color: #fff;
    width: 200px;
    margin: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

#qrcode {
    text-align: center;
    width: 200px;
    color: #666;
    margin: auto;
    display: block;
    font-size: 13px;
}

.scrollWrapper {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    width: 100%;
}

.scrollWrapper.search {
    top: 55px;
}

.panel-transition {
    -webkit-transition: -webkit-transform .4s cubic-bezier(0,1,0,1);
    -moz-transition: -moz-transform .4s cubic-bezier(0,1,0,1);
    transition: transform .4s cubic-bezier(0,1,0,1);
}

.from-panel-transform-reverse {
    -webkit-transform: translate3d(100%,0,0);
    -moz-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}

.from-panel-transform {
    -webkit-transform: translate3d(-100%,0,0);
    -moz-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

.to-panel-transform-ready-reverse {
    -webkit-transform: translate3d(-100%,0,0);
    -moz-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

.to-panel-transform-ready {
    -webkit-transform: translate3d(100%,0,0);
    -moz-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}

.to-panel-transform-reverse {
    -webkit-transform: translate3d(0%,0,0);
    -moz-transform: translate3d(0%,0,0);
    transform: translate3d(0%,0,0);
}

.to-panel-transform {
    -webkit-transform: translate3d(0%,0,0);
    -moz-transform: translate3d(0%,0,0);
    transform: translate3d(0%,0,0);
}

.message_bubble {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
    text-align: center;
    display: none;
}

.message_bubble.show {
    display: block;
}

.message_body {
    background: #f7c709;
    display: inline-block;
    padding: 0 10px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

.message_content {
    white-space: nowrap;
    margin-right: 20px;
}

.message_bubble .close {
    float: right;
    color: red;
    font-family: cursive,Helvetica,'微软雅黑';
    cursor: pointer;
}

.hiddenIframe {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.panel_header {
    position: relative;
    z-index: 100;
}

.pannel_menu_list {
    position: absolute;
    width: 100%;
    height: 80px;
    left: 0;
    top: -90px;
    overflow: hidden;
    background: #3c3c3c;
    box-shadow: #141111 0 2px 5px;
    display: none;
    -webkit-transition: top .2s ease-out;
    -moz-transition: top .2s ease-out;
    transition: top .2s ease-out;
}

.pannel_menu_list.show {
    top: 0;
}

.pannel_menu_list li {
    height: 80px;
    width: 80px;
    text-align: center;
    float: left;
    font-size: 12px;
    background: #2c2c2c;
    background: -webkit-gradient(linear,left top,left bottom,from(#4e4e4e),to(#2c2c2c));
    background: -webkit-linear-gradient(#4e4e4e,#2c2c2c);
    background: -moz-linear-gradient(#4e4e4e,#2c2c2c);
    background: -ms-linear-gradient(#4e4e4e,#2c2c2c);
    background: -o-linear-gradient(#4e4e4e,#2c2c2c);
    background: linear-gradient(#4e4e4e,#2c2c2c);
    border-right: 1px solid #1f1a1a;
    border-left: 1px solid #2b89d1;
    cursor: pointer;
    color: #fff;
}

.menu_list_icon {
    width: 40px;
    height: 40px;
    margin: 10px auto 5px;
    background-image: url(../image/menu_icons.png);
    background-repeat: no-repeat;
}

.viewMembers .menu_list_icon {
    background-position: 0 2px;
}

.viewInfo .menu_list_icon {
    background-position: -43px 2px;
}

.viewRecord {
    display: none!important;
}

.viewRecord .menu_list_icon {
    background-position: -90px 2px;
}

.viewQzone .menu_list_icon {
    background-position: -128px 3px;
}

.sendPicture .menu_list_icon {
    background-position: -170px 3px;
}

.sendFile .menu_list_icon {
    background-position: -210px 3px;
}

.masker {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: #2b89d1;
    background: rgba(0,0,0,.5);
    z-index: 11000;
}

.login-panel {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
    z-index: 11001;
    opacity: 0;
}

.login-panel.show {
    opacity: 1;
    -webkit-transition: opacity .3s ease-in-out;
}

.close-login-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 24px;
    background: url(../image/login_panel_close.png) no-repeat center center;
    border-left: 1px solid #f0f0f0;
    cursor: pointer;
}

#btn_logout, #btn_save_profile {
    margin-top: 12px;
}

.arrow_right {
    right: 8px!important;
    background: url(../image/open_arrow.png) no-repeat center;
    background-size: 100% 100%;
}

.userAvatar, .userInfo {
    display: inline-block;
}

.userAvatar img {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 45px;
    height: 45px;
    vertical-align: middle;
}

.userInfo {
    margin-left: 8px;
    vertical-align: middle;
}

.userInfo span {
    line-height: 20px;
}

#myState_setting {
    font-size: 12px;
    color: #aaa;
    vertical-align: middle;
}

.stateIcon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: 100% 100%;
    vertical-align: middle;
}

.online .stateIcon {
    background-image: url(../image/onlinestatus_online.png);
}

.invisible .stateIcon {
    background-image: url(../image/onlinestatus_invisible.png);
}

.leave .stateIcon {
    background-image: url(../image/onlinestatus_leave.png);
}

.list_wrapper {
    margin-top: 16px;
}

.list_wrapper:first-child {
    margin-top: 0;
}

.list_wrapper .list {
    margin-top: 10px;
}

.list_title {
    margin-left: 3px;
    font-size: 14px;
    font-weight: 700;
    color: #aaa;
}

.check_icon {
    background: url(../image/list_checkmark.png);
    background-size: 100% 100%;
}

.checkList .check_icon {
    display: none;
}

.checkList .checked .check_icon {
    display: block;
}

.stateIcon.big {
    margin-top: -12px;
    width: 25px;
    height: 25px;
}

.stateIcon.big + .list_text {
    margin-left: 35px;
}

#formProfile li {
    display: -webkit-box;
    display: -moz-box;
    display: box;
}

#formProfile li .list_text {
    position: relative;
    width: 75px;
    color: #999;
    z-index: 1;
}

#formProfile input, #formProfile textarea {
    display: block;
    position: relative;
    top: -1px;
    margin-left: -75px;
    padding: 0 0 0 75px;
    width: 100%;
    border: 0;
    outline: 0;
    word-wrap: break-word;
    word-break: break-all;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#formProfile textarea {
    resize: none;
}

.check_gender {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding: 3px 15px 3px 35px;
    border-radius: 15px;
}

.selected.check_gender {
    border: 1px solid #cfcfcf;
}

.check_gender:before {
    content: "";
    position: absolute;
    top: -3px;
    left: 17px;
    width: 24px;
    height: 28px;
}

.male:before {
    background: url(../image/lbs_popup_male_selected.png);
    background-size: 100% 100%;
}

.female {
    margin-left: 25px;
}

.female:before {
    background: url(../image/lbs_popup_female_selected.png);
    background-size: 100% 100%;
}

.tips {
    color: #666;
}

.notify_setting .switch {
    float: right;
}

.online_state_setting {
    position: relative;
    float: left;
    height: 20px;
    margin-top: 30px;
    font-size: 12px;
    cursor: pointer;
}

.online_state_setting .down_arrow {
    width: 10px;
    height: 10px;
    background-image: url(../image/);
    background-repeat: no-repeat;
    background-position: -162px 4px;
    float: left;
    cursor: pointer;
}

.online_state_setting ul {
    display: none;
    position: absolute;
    border: 1px solid #000;
    top: 20px;
    left: -40px;
    background: #fff;
    width: 70px;
}

.online_state_setting li {
    padding: 5px 3px;
    cursor: pointer;
}

.online_state_setting li:hover {
    background: #cff7ff;
}

.online_state_setting li i, .online_state_setting .main_icon {
    display: block;
    width: 10px;
    height: 10px;
    background-image: url(../image/);
    background-repeat: no-repeat;
    float: left;
    margin-right: 2px;
}

.online_icon {
    background-position: 0 0;
}

.away_icon {
    background-position: -18px 0;
}

.busy_icon {
    background-position: -36px 0;
}

.hidden_icon {
    background-position: -54px 0;
}

.callme_icon {
    background-position: -72px 0;
}

.offline_icon {
    background-position: -90px 0;
}

.silent_icon {
    background-position: -108px 0;
}

.member_tab {
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    -moz-tap-highlight-color: rgba(255,255,255,0);
    tap-highlight-color: rgba(255,255,255,0);
}

.list_group {
    cursor: pointer;
}

.list_group_title {
    padding: 4px 0;
}

.list_item {
    background: whitesmoke;
}

.list_arrow_right {
    background: url(../image/open_arrow.png) no-repeat 12px;
    background-size: 14px 14px;
}

.list_item:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
}

.list_item .avatar {
    float: left;
    position: relative;
}

/*.list_item .avatar img {
        width: 100%;
        height: 100%;
    }*/
.list_white > .list_item.selected {
    border-color: #ccc;
    background: #f1f1f1;
    background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1));
    background: -webkit-linear-gradient(white,#f1f1f1);
    background: -moz-linear-gradient(white,#f1f1f1);
    background: -ms-linear-gradient(white,#f1f1f1);
    background: -o-linear-gradient(white,#f1f1f1);
    background: linear-gradient(#fff,#f1f1f1);
}

.member_tab_body {
    position: absolute;
    bottom: 0;
    top: 39px;
}

.member_tab .member_tab_body > li {
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    display: none;
}

.member_tab .member_tab_body > li.active {
    display: block;
}

.member_nick {
    padding: 6px 0 0 5px;
}

.member_msg {
    padding-top: 5px 10px 0 5px;
    font-size: 12px;
}

.member_scroll_area {
    /*overflow: hidden;*/
    bottom: 0;
    top: 0;
    position: absolute;
    left: 0;
    width: 100%;
    background: gray;
}

.member_tab {
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    -moz-tap-highlight-color: rgba(255,255,255,0);
    tap-highlight-color: rgba(255,255,255,0);
}

.member_tab .tab_head {
    border: 0;
    background: #fff;
}

.member_tab .tab_head li {
    border: 0;
    border-bottom: 2px solid #ccc;
    width: 33.33%;
    padding: .65em 12px;
    background: 0;
    -webkit-box-shadow: 10px 0 0 -9px #ccc;
    -moz-box-shadow: 10px 0 0 -9px #ccc;
    box-shadow: 10px 0 0 -9px #ccc;
    cursor: pointer;
}

.member_tab .tab_head li.active {
    border-bottom-color: #0aa7ff;
    color: #0aa7ff;
}

#friend_groupList, #g_list, #d_list {
    border: 0;
}

.list_group:first-child .list_group_title {
    border-top: 0;
}

.list_group_title {
    padding: .65em 28px .75em;
}

.member_tab .list_item {
    background: whitesmoke;
}

.member_tab .list_item img {
    float: left;
    margin-right: 12px;
    width: 40px;
    height: 40px;
}

.member_nick {
    line-height: 23px;
    height: 22px;
    overflow: hidden;
}

.member_nick span {
    color: #aaa;
    line-height: 17px;
    font-size: 12px;
}

.member_msg {
    overflow: hidden;
    font-size: 12px;
    color: #aaa;
    line-height: 28px;
    padding-left: 5px;
}

.member_msg img {
    width: 19px;
    height: 19px;
    vertical-align: text-bottom;
}

.avatar {
    width: 40px;
    height: 40px;
    margin: 10px;
}

.list_group_body {
    display: none;
}

.list_group.active .list_group_body {
    display: block;
}

.list_group.active .list_arrow_right {
    background-image: url(../image/open_arrow_fire.png)!important;
}

.onlinePercent {
    color: gray;
    font-size: 12px;
    float: right;
    line-height: 20px;
}

.panel .chat_toolbar {
    padding: 3px 10px 5px 6px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    width: 100%;
}

.panel .chat_toolbar_footer {
    z-index: auto;
    background: 0;
}

header, footer {
    -webkit-user-select: none;
}

.chat_toolbar {
    background: #0e3154;
    color: #fff;
    background: -webkit-gradient(linear,left top,left bottom,from(#2b89d1),to(#1f1a1a));
    background: -webkit-linear-gradient(#2b89d1,#1f1a1a);
    background: -moz-linear-gradient(#2b89d1,#1f1a1a);
    background: -ms-linear-gradient(#2b89d1,#1f1a1a);
    background: -o-linear-gradient(#2b89d1,#1f1a1a);
    background: linear-gradient(#2b89d1,#1f1a1a);
}

.chat_toolbar .btn {
    display: block;
}

.chat_toolbar .btn_img {
    width: 30px;
    height: 30px;
}

#add_app_btn {
    border: 0;
    padding: 5px;
    background: 0;
    width: 38px;
}

#add_photo_btn, #add_input_btn, #add_face_btn, #add_hb_btn {
    border: 0;
    background: 0;
    width: 32px;
}

#send_chat_btn {
    margin-left: 5px;
    width: 56px;
    display: none;
    margin-top: 3px;
}

.chat_textarea {
    display: block;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px 10px;
    height: 32px;
    resize: none;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    margin: 5px 0px 5px 6px;
    max-height: 80px;
    overflow: hidden;
}

.chat_yuyin {
    display: block;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px 10px;
    height: 32px;
    resize: none;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    margin: 5px 0px 5px 6px;
    max-height: 80px;
    overflow: hidden;
    text-align: center;
    font-size: 14px;
    font-family: 'Microsoft YaHei';
}

#chat_container_scroll_area {
    background: gray;
    position: absolute;
    top: 45px;
    bottom: 70px;
    width: 100%;
}

.chat_container {
    background: #a8b6b9;
    width: 100%;
    min-height: 100%;
}

.chat_container:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
}

.send_chat_btn .btn_text {
    padding: 5px;
}

.chat_content_group {
    padding: 10px;
}

.chat_content_avatar {
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    cursor: pointer;
}

.chat_nick {
    font-size: 14px;
    margin: 0 0 10px;
    cursor: pointer;
}

.chat_content {
    display: inline-block;
    min-height: 16px;
    max-width: 50%;
    background: #97c94c;
    background: -webkit-gradient(linear,left top,left bottom,from(#cf9),to(#9c3));
    background: -webkit-linear-gradient(#cf9,#9c3);
    background: -moz-linear-gradient(#cf9,#9c3);
    background: -ms-linear-gradient(#cf9,#9c3);
    background: -o-linear-gradient(#cf9,#9c3);
    background: linear-gradient(#cf9,#9c3);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 10px 15px;
    word-break: break-all;
    box-shadow: 1px 1px 5px #000;
    line-height: 1.4;
}

.chat_hongbao {
    display: inline-block;
    width: 200px;
    height: 95px;
    background-image: url(..../image/hb.png);
    cursor: pointer;
}

.chat_hongbao div {
    position: relative;
    top: 28px;
    color: white;
    font-size: 12px;
    left: 55px;
    width: 140px;
    text-align: left;
}

.chat_hongbao p {
    position: relative;
    top: 20px;
    color: white;
    font-size: 14px;
    left: 55px;
    width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.chat_content_group.buddy {
    text-align: left;
}

.chat_content_group.self {
    text-align: right;
}

.chat_content_group.self > .chat_content {
    background: #fff;
    background: -webkit-gradient(linear,left top,left bottom,from(white,#e1e1e1));
    background: -webkit-linear-gradient(white,#e1e1e1);
    background: -moz-linear-gradient(white,#e1e1e1);
    background: -ms-linear-gradient(white,#e1e1e1);
    background: -o-linear-gradient(white,#e1e1e1);
    background: linear-gradient(#fff,#e1e1e1);
}

.chat_content_group.self > .chat_content_avatar {
    float: right;
    margin: 0 0 0 10px;
}

.chat_content_group.self > .chat_nick {
    text-align: right;
}

.chat_content_group.self > .chat_content {
    text-align: left;
}

.chat_content_group.system > .chat_content {
    max-width: 100%;
    background: #f6fabb;
    background: -webkit-linear-gradient(#f6fabb,#fdf98d);
    background: -moz-linear-gradient(#f6fabb,#fdf98d);
    background: -ms-linear-gradient(#f6fabb,#fdf98d);
    background: -o-linear-gradient(#f6fabb,#fdf98d);
    background: linear-gradient(#f6fabb,#fdf98d);
}

.chat_content_group.system {
    text-align: left!important;
}

.chat_content .icon {
    width: 20px;
    height: 20px;
    float: left;
    background-image: url(../image/tips_icon.png);
}

.chat_content .icon_info {
    background-position: -60px 0;
}

.chat_content .icon_err {
    background-position: -20px 0;
}

.chat_content .icon_succ {
    background-position: -40px 0;
}

.hidden_textarea {
    position: absolute;
    left: -100000em;
    top: 0;
    overflow: hidden;
    width: 20px;
    height: 20px;
}

.chat_time {
    text-align: center;
    line-height: 20px;
}

.chat_time span {
    color: rgba(255,255,255,.8);
    background: rgba(0,0,0,.3);
    padding: 2px 8px;
    display: inline-block;
    margin: 10px;
    font-size: 13px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
}

.qq_face_area {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    cursor: pointer;
}

.faceIteam {
    list-style: none;
    height: 144px;
    float: left;
    background-repeat: no-repeat;
    background-size: contain;
}

.faceIteam1 {
    background-image: url(../image/panel/face/1.jpg);
}

.faceIteam2 {
    background-image: url(../image/panel/face/2.jpg);
}

.faceIteam3 {
    background-image: url(../image/panel/face/3.jpg);
}

.faceIteam4 {
    background-image: url(../image/panel/face/4.jpg);
}

.faceIteam5 {
    background-image: url(../image/panel/face/5.jpg);
}

.faceIteam6 {
    background-image: url(../image/panel/face/6.jpg);
}

.faceIteam7 {
    background-image: url(../image/panel/face/7.jpg);
}

.btnsWrap {
    padding: 0 0 10px 290px;
    border-radius: 0 0 6px 6px;
    background: rgba(34,34,34,.7);
}

.btnsWrap:after {
    display: block;
    content: "";
    clear: both;
}

.btnsWrap > li {
    float: left;
    list-style-type: none;
    margin: 5px 10px 0 0;
    padding: 2px;
    width: 10px;
    height: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    background: gray;
}

.btnsWrap > li.selected {
    background: #000;
}

.chat_toolbar_footer {
    z-index: auto;
}

.qq_face_area ul li i:hover {
    border: 1px solid #5f9cc5;
}

@media all and (max-width: 320px) {
    .faceIteam {
        width: 320px!important;
    }

    .qq_face_area {
        display: none;
        width: 320px;
        text-align: center;
        margin: 0 auto;
        overflow: hidden;
    }

    .qq_face_area .wrap li {
        list-style: none;
        height: 130px;
        float: left;
    }

    .qq_face_area ul li i {
        width: 45px;
        height: 42px;
        display: block;
        float: left;
    }

    .panelShowFace {
        bottom: 199px!important;
    }

    .btnsWrap {
        padding: 0 0 5px 106px;
    }
}

@media all and (min-width: 321px) {
    .faceIteam {
        width: 360px!important;
    }

    .qq_face_area {
        display: none;
        width: 360px;
        text-align: center;
        margin: 0 auto;
        overflow: hidden;
    }

    .qq_face_area .wrap li {
        list-style: none;
        height: 145px;
        float: left;
    }

    .qq_face_area ul li i {
        width: 51px;
        height: 47px;
        display: block;
        float: left;
    }

    .panelShowFace {
        bottom: 214px!important;
    }

    .btnsWrap {
        padding: 0 0 5px 122px;
    }
}

@media all and (min-width: 480px) {
    .faceIteam {
        width: 480px!important;
    }

    .qq_face_area {
        display: none;
        width: 480px;
        text-align: center;
        margin: 0 auto;
        overflow: hidden;
    }

    .qq_face_area .wrap li {
        list-style: none;
        height: 192px;
        float: left;
    }

    .qq_face_area ul li i {
        width: 68px;
        height: 63px;
        display: block;
        float: left;
    }

    .panelShowFace {
        bottom: 262px!important;
    }

    .btnsWrap {
        padding: 0 0 5px 183px;
    }
}

@media all and (min-width: 640px) {
    .faceIteam {
        width: 640px!important;
    }

    .qq_face_area {
        display: none;
        width: 640px;
        text-align: center;
        margin: 0 auto;
        overflow: hidden;
    }

    .qq_face_area .wrap li {
        list-style: none;
        height: 256px;
        float: left;
    }

    .qq_face_area ul li i {
        width: 91px;
        height: 84px;
        display: block;
        float: left;
    }

    .panelShowFace {
        bottom: 328px!important;
    }

    .btnsWrap {
        padding: 0 0 7px 263px;
    }
}

@media all and (min-width: 720px) {
    .faceIteam {
        width: 700px!important;
    }

    .qq_face_area {
        display: none;
        width: 700px;
        text-align: center;
        margin: 0 auto;
        overflow: hidden;
    }

    .qq_face_area .wrap li {
        list-style: none;
        height: 280px;
        float: left;
    }

    .qq_face_area ul li i {
        width: 99px;
        height: 92px;
        display: block;
        float: left;
    }

    .panelShowFace {
        bottom: 355px!important;
    }

    .btnsWrap {
        padding: 0 0 10px 290px;
    }
}

@media all and (min-width: 1000px) and (max-height:500px) {
    .qq_face_area {
        display: none!important;
    }

    .panelShowFace {
        bottom: 50px!important;
    }
}

.sendFile {
    position: relative;
}

.panelSendForm {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

a.simpleMenuItem {
    display: block;
    padding: 0 10px 0 5px;
    height: 24px;
    overflow: hidden;
    color: #000;
    line-height: 24px;
}

.panelSendForm .file_input {
    width: 440px;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    filter: alpha(opacity=0);
    opacity: 0;
}

.fileAct {
    color: gray;
    display: inline;
}

.fileLink {
    cursor: pointer;
    color: #369;
}

.file_icon {
    display: inline-block;
    overflow: hidden;
    height: 20px;
    width: 20px;
    margin: -2px 2px 0 0;
    vertical-align: middle;
    background: url(../image/file_icons.png) no-repeat;
}

.icon_excel {
    background-position: 0 0;
}

.icon_exe16 {
    background-position: -60px 0;
}

.icon_media {
    background-position: -100px 0;
}

.icon_music {
    background-position: -120px 0;
}

.icon_others {
    background-position: -140px 0;
}

.icon_pdf16 {
    background-position: -180px 0;
}

.icon_pic {
    background-position: -80px 0;
}

.icon_ppt {
    background-position: -20px 0;
}

.icon_rar-zip {
    background-position: -160px 0;
}

.icon_share-txt {
    background-position: -200px 0;
}

.icon_word {
    background-position: -40px 0;
}

.search_wrapper {
    position: relative;
    border-top: 1px solid #696969;
    border-bottom: 1px solid #a2a2a2;
    padding: 10px 6px;
    background: #ededed;
    background: -webkit-linear-gradient(top,#ededed,#d6d6d6);
    background: -webkit-linear-gradient(top,#ededed,#d6d6d6);
    background: -moz-linear-gradient(top,#ededed,#d6d6d6);
    background: -ms-linear-gradient(top,#ededed,#d6d6d6);
    background: -o-linear-gradient(top,#ededed,#d6d6d6);
    background: linear-gradient(top,#ededed,#d6d6d6);
}

.search_inner {
    position: relative;
    border: 1px solid #d0d0d0;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    padding: 5px 32px 0 20px;
    background: #fff;
    -webkit-box-shadow: 0 1px #ececec,inset 0 1px #a7a8a8,inset 1px 0 #a7a8a8,inset -1px 0 #a7a8a8;
    -moz-box-shadow: 0 1px #ececec,inset 0 1px #a7a8a8,inset 1px 0 #a7a8a8,inset -1px 0 #a7a8a8;
    box-shadow: 0 1px #ececec,inset 0 1px #a7a8a8,inset 1px 0 #a7a8a8,inset -1px 0 #a7a8a8;
}

.search_container_scroll_area {
    top: 55px;
    bottom: 0;
}

.search_container {
    width: 100%;
}

.searchInput {
    width: 100%;
    font-family: '微软雅黑','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 20px;
    background: #fff;
}

.search_title {
    font-size: 12px;
    color: #747474;
    margin: 0 0 8px 5px;
    -webkit-text-shadow: 0 1px 0 #fff;
    -moz-text-shadow: 0 1px 0 #fff;
    text-shadow: 0 1px 0 #fff;
}

.searchBtn {
    position: absolute;
    top: 30px;
    right: 8px;
    border: 1px solid #bbb;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 13px;
    color: #959595;
    vertical-align: top;
    -webkit-box-shadow: 0 1px #ececec;
    -moz-box-shadow: 0 1px #ececec;
    box-shadow: 0 1px #ececec;
    background: #2b89d1;
    background: -webkit-linear-gradient(top,#2b89d1,#707070);
    background: -webkit-linear-gradient(top,#2b89d1,#707070);
    background: -moz-linear-gradient(top,#2b89d1,#707070);
    background: -ms-linear-gradient(top,#2b89d1,#707070);
    background: -o-linear-gradient(top,#2b89d1,#707070);
    background: linear-gradient(top,#2b89d1,#707070);
}

.searchClear {
    display: none;
    position: absolute;
    top: 7px;
    right: 8px;
    border: 0;
    width: 20px;
    height: 20px;
    background: #bfbfbf url(../image/clear.png) center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.searchCancel {
    position: absolute;
    height: 33px;
    width: 50px;
    top: 10px;
    right: 10px;
    display: none;
}

#search_container_scroll_area {
    background: #b9b9b9;
}

.search_wrapper.hascontent .search_inner {
    margin-right: 60px;
}

.search_wrapper.hascontent .searchCancel {
    display: block;
}

.search_wrapper.hascontent .searchClear {
    display: block;
}

.list_page .group {
    padding: 10px;
}

.list_page .group > .row {
    border-left: 1px solid #afc8e2;
    border-right: 1px solid #afc8e2;
    border-bottom: 1px solid #afc8e2;
    padding: 10px;
    background: #fff;
}

.list_page .group > .row:first-child {
    border-top: 1px solid #afc8e2;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.list_page .group > .row:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.list_page .group > .row > .cloumn {
    float: left;
}

.list_page .label {
    color: #666;
    float: left;
    width: 80px;
}

.list_page .long_label {
    color: #666;
    float: left;
}

.list_page .row-content {
    overflow: hidden;
}

.list_page .more_icon {
    float: right;
    width: 16px;
    height: 16px;
    background: url(../image/open_arrow.png) no-repeat center;
    background-size: 100% 100%;
    margin-left: 10px;
}

.active .more_icon {
    background: url(../image/open_arrow_fire.png) no-repeat center!important;
    background-size: 100% 100%!important;
}

.list_page .text_right {
    float: right;
}

.profile_title {
    padding-top: 5px;
    padding-left: 5px;
}

.profile_title_setting {
    padding-top: 5px;
    padding-left: 5px;
    width: 62%;
}

.profile_name {
    font-size: 1.4em;
    line-height: 1.4em;
}

.profile_account {
    color: #666;
    font-size: .9em;
}

.list_page .clickable {
    cursor: pointer;
}

.panel footer.profile-footer {
    border-radius: 0 0 6px 6px;
    height: 6px;
    overflow: hidden;
    background: #ededed;
}

.profile_signature {
    line-height: 22px;
    overflow: hidden;
}

.sendMsg2Member {
    /*display: none!important;*/
    float: right;
    margin-top: 30px;
}

#plugin_list > li {
    cursor: pointer;
    position: relative;
    width: 80px;
    height: 80px;
    float: left;
    background-color: #dadbe0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#e7e8eb),color-stop(50%,#dadbe0),color-stop(75%,#c7cbd2),color-stop(95%,#d3d6db),color-stop(100%,#d3d6dd));
    background-image: -webkit-linear-gradient(#e7e8eb,#dadbe0 50%,#c7cbd2 75%,#d3d6db 95%,#d3d6dd);
    background-image: -moz-linear-gradient(#e7e8eb,#dadbe0 50%,#c7cbd2 75%,#d3d6db 95%,#d3d6dd);
    background-image: -o-linear-gradient(#e7e8eb,#dadbe0 50%,#c7cbd2 75%,#d3d6db 95%,#d3d6dd);
    background-image: linear-gradient(#e7e8eb,#dadbe0 50%,#c7cbd2 75%,#d3d6db 95%,#d3d6dd);
    border: 1px solid #eceef2;
    border-bottom-color: #c1c7d2;
    border-right-color: #c1c7d2;
}

#plugin_list > li > a {
    position: absolute;
    bottom: 2%;
    left: 0;
    display: block;
    width: 100%;
    height: 19px;
    line-height: 19px;
    font-size: 13px;
    text-align: center;
}

/*#panelBodyWrapper-userinfo input, textarea {
    border-bottom: 1px solid blue;
}*/
@media screen and (min-width: 1000px) {
    #plugin_list > li {
        width: 93.33px;
        height: 93.33px;
    }

    #plugin_list > li > a {
        bottom: 6px;
    }
}

@media screen and (width: 240px) {
    #plugin_list > li {
        width: 80px;
        height: 80px;
    }
}

@media screen and (width: 241px) {
    #plugin_list > li {
        width: 80.33333px;
        height: 80.33333px;
    }
}

@media screen and (width: 242px) {
    #plugin_list > li {
        width: 80.66667px;
        height: 80.66667px;
    }
}

@media screen and (width: 243px) {
    #plugin_list > li {
        width: 81px;
        height: 81px;
    }
}

@media screen and (width: 244px) {
    #plugin_list > li {
        width: 81.33333px;
        height: 81.33333px;
    }
}

@media screen and (width: 245px) {
    #plugin_list > li {
        width: 81.66667px;
        height: 81.66667px;
    }
}

@media screen and (width: 246px) {
    #plugin_list > li {
        width: 82px;
        height: 82px;
    }
}

@media screen and (width: 247px) {
    #plugin_list > li {
        width: 82.33333px;
        height: 82.33333px;
    }
}

@media screen and (width: 248px) {
    #plugin_list > li {
        width: 82.66667px;
        height: 82.66667px;
    }
}

@media screen and (width: 249px) {
    #plugin_list > li {
        width: 83px;
        height: 83px;
    }
}

@media screen and (width: 250px) {
    #plugin_list > li {
        width: 83.33333px;
        height: 83.33333px;
    }
}

@media screen and (width: 251px) {
    #plugin_list > li {
        width: 83.66667px;
        height: 83.66667px;
    }
}

@media screen and (width: 252px) {
    #plugin_list > li {
        width: 84px;
        height: 84px;
    }
}

@media screen and (width: 253px) {
    #plugin_list > li {
        width: 84.33333px;
        height: 84.33333px;
    }
}

@media screen and (width: 254px) {
    #plugin_list > li {
        width: 84.66667px;
        height: 84.66667px;
    }
}

@media screen and (width: 255px) {
    #plugin_list > li {
        width: 85px;
        height: 85px;
    }
}

@media screen and (width: 256px) {
    #plugin_list > li {
        width: 85.33333px;
        height: 85.33333px;
    }
}

@media screen and (width: 257px) {
    #plugin_list > li {
        width: 85.66667px;
        height: 85.66667px;
    }
}

@media screen and (width: 258px) {
    #plugin_list > li {
        width: 86px;
        height: 86px;
    }
}

@media screen and (width: 259px) {
    #plugin_list > li {
        width: 86.33333px;
        height: 86.33333px;
    }
}

@media screen and (width: 260px) {
    #plugin_list > li {
        width: 86.66667px;
        height: 86.66667px;
    }
}

@media screen and (width: 261px) {
    #plugin_list > li {
        width: 87px;
        height: 87px;
    }
}

@media screen and (width: 262px) {
    #plugin_list > li {
        width: 87.33333px;
        height: 87.33333px;
    }
}

@media screen and (width: 263px) {
    #plugin_list > li {
        width: 87.66667px;
        height: 87.66667px;
    }
}

@media screen and (width: 264px) {
    #plugin_list > li {
        width: 88px;
        height: 88px;
    }
}

@media screen and (width: 265px) {
    #plugin_list > li {
        width: 88.33333px;
        height: 88.33333px;
    }
}

@media screen and (width: 266px) {
    #plugin_list > li {
        width: 88.66667px;
        height: 88.66667px;
    }
}

@media screen and (width: 267px) {
    #plugin_list > li {
        width: 89px;
        height: 89px;
    }
}

@media screen and (width: 268px) {
    #plugin_list > li {
        width: 89.33333px;
        height: 89.33333px;
    }
}

@media screen and (width: 269px) {
    #plugin_list > li {
        width: 89.66667px;
        height: 89.66667px;
    }
}

@media screen and (width: 270px) {
    #plugin_list > li {
        width: 90px;
        height: 90px;
    }
}

@media screen and (width: 271px) {
    #plugin_list > li {
        width: 90.33333px;
        height: 90.33333px;
    }
}

@media screen and (width: 272px) {
    #plugin_list > li {
        width: 90.66667px;
        height: 90.66667px;
    }
}

@media screen and (width: 273px) {
    #plugin_list > li {
        width: 91px;
        height: 91px;
    }
}

@media screen and (width: 274px) {
    #plugin_list > li {
        width: 91.33333px;
        height: 91.33333px;
    }
}

@media screen and (width: 275px) {
    #plugin_list > li {
        width: 91.66667px;
        height: 91.66667px;
    }
}

@media screen and (width: 276px) {
    #plugin_list > li {
        width: 92px;
        height: 92px;
    }
}

@media screen and (width: 277px) {
    #plugin_list > li {
        width: 69.25px;
        height: 69.25px;
    }
}

@media screen and (width: 278px) {
    #plugin_list > li {
        width: 69.5px;
        height: 69.5px;
    }
}

@media screen and (width: 279px) {
    #plugin_list > li {
        width: 69.75px;
        height: 69.75px;
    }
}

@media screen and (width: 280px) {
    #plugin_list > li {
        width: 70px;
        height: 70px;
    }
}

@media screen and (width: 281px) {
    #plugin_list > li {
        width: 70.25px;
        height: 70.25px;
    }
}

@media screen and (width: 282px) {
    #plugin_list > li {
        width: 70.5px;
        height: 70.5px;
    }
}

@media screen and (width: 283px) {
    #plugin_list > li {
        width: 70.75px;
        height: 70.75px;
    }
}

@media screen and (width: 284px) {
    #plugin_list > li {
        width: 71px;
        height: 71px;
    }
}

@media screen and (width: 285px) {
    #plugin_list > li {
        width: 71.25px;
        height: 71.25px;
    }
}

@media screen and (width: 286px) {
    #plugin_list > li {
        width: 71.5px;
        height: 71.5px;
    }
}

@media screen and (width: 287px) {
    #plugin_list > li {
        width: 71.75px;
        height: 71.75px;
    }
}

@media screen and (width: 288px) {
    #plugin_list > li {
        width: 72px;
        height: 72px;
    }
}

@media screen and (width: 289px) {
    #plugin_list > li {
        width: 72.25px;
        height: 72.25px;
    }
}

@media screen and (width: 290px) {
    #plugin_list > li {
        width: 72.5px;
        height: 72.5px;
    }
}

@media screen and (width: 291px) {
    #plugin_list > li {
        width: 72.75px;
        height: 72.75px;
    }
}

@media screen and (width: 292px) {
    #plugin_list > li {
        width: 73px;
        height: 73px;
    }
}

@media screen and (width: 293px) {
    #plugin_list > li {
        width: 73.25px;
        height: 73.25px;
    }
}

@media screen and (width: 294px) {
    #plugin_list > li {
        width: 73.5px;
        height: 73.5px;
    }
}

@media screen and (width: 295px) {
    #plugin_list > li {
        width: 73.75px;
        height: 73.75px;
    }
}

@media screen and (width: 296px) {
    #plugin_list > li {
        width: 74px;
        height: 74px;
    }
}

@media screen and (width: 297px) {
    #plugin_list > li {
        width: 74.25px;
        height: 74.25px;
    }
}

@media screen and (width: 298px) {
    #plugin_list > li {
        width: 74.5px;
        height: 74.5px;
    }
}

@media screen and (width: 299px) {
    #plugin_list > li {
        width: 74.75px;
        height: 74.75px;
    }
}

@media screen and (width: 300px) {
    #plugin_list > li {
        width: 75px;
        height: 75px;
    }
}

@media screen and (width: 301px) {
    #plugin_list > li {
        width: 75.25px;
        height: 75.25px;
    }
}

@media screen and (width: 302px) {
    #plugin_list > li {
        width: 75.5px;
        height: 75.5px;
    }
}

@media screen and (width: 303px) {
    #plugin_list > li {
        width: 75.75px;
        height: 75.75px;
    }
}

@media screen and (width: 304px) {
    #plugin_list > li {
        width: 76px;
        height: 76px;
    }
}

@media screen and (width: 305px) {
    #plugin_list > li {
        width: 76.25px;
        height: 76.25px;
    }
}

@media screen and (width: 306px) {
    #plugin_list > li {
        width: 76.5px;
        height: 76.5px;
    }
}

@media screen and (width: 307px) {
    #plugin_list > li {
        width: 76.75px;
        height: 76.75px;
    }
}

@media screen and (width: 308px) {
    #plugin_list > li {
        width: 77px;
        height: 77px;
    }
}

@media screen and (width: 309px) {
    #plugin_list > li {
        width: 77.25px;
        height: 77.25px;
    }
}

@media screen and (width: 310px) {
    #plugin_list > li {
        width: 77.5px;
        height: 77.5px;
    }
}

@media screen and (width: 311px) {
    #plugin_list > li {
        width: 77.75px;
        height: 77.75px;
    }
}

@media screen and (width: 312px) {
    #plugin_list > li {
        width: 78px;
        height: 78px;
    }
}

@media screen and (width: 313px) {
    #plugin_list > li {
        width: 78.25px;
        height: 78.25px;
    }
}

@media screen and (width: 314px) {
    #plugin_list > li {
        width: 78.5px;
        height: 78.5px;
    }
}

@media screen and (width: 315px) {
    #plugin_list > li {
        width: 78.75px;
        height: 78.75px;
    }
}

@media screen and (width: 316px) {
    #plugin_list > li {
        width: 79px;
        height: 79px;
    }
}

@media screen and (width: 317px) {
    #plugin_list > li {
        width: 79.25px;
        height: 79.25px;
    }
}

@media screen and (width: 318px) {
    #plugin_list > li {
        width: 79.5px;
        height: 79.5px;
    }
}

@media screen and (width: 319px) {
    #plugin_list > li {
        width: 79.75px;
        height: 79.75px;
    }
}

@media screen and (width: 320px) {
    #plugin_list > li {
        width: 80px;
        height: 80px;
    }
}

@media screen and (width: 321px) {
    #plugin_list > li {
        width: 80.25px;
        height: 80.25px;
    }
}

@media screen and (width: 322px) {
    #plugin_list > li {
        width: 80.5px;
        height: 80.5px;
    }
}

@media screen and (width: 323px) {
    #plugin_list > li {
        width: 80.75px;
        height: 80.75px;
    }
}

@media screen and (width: 324px) {
    #plugin_list > li {
        width: 81px;
        height: 81px;
    }
}

@media screen and (width: 325px) {
    #plugin_list > li {
        width: 81.25px;
        height: 81.25px;
    }
}

@media screen and (width: 326px) {
    #plugin_list > li {
        width: 81.5px;
        height: 81.5px;
    }
}

@media screen and (width: 327px) {
    #plugin_list > li {
        width: 81.75px;
        height: 81.75px;
    }
}

@media screen and (width: 328px) {
    #plugin_list > li {
        width: 82px;
        height: 82px;
    }
}

@media screen and (width: 329px) {
    #plugin_list > li {
        width: 82.25px;
        height: 82.25px;
    }
}

@media screen and (width: 330px) {
    #plugin_list > li {
        width: 82.5px;
        height: 82.5px;
    }
}

@media screen and (width: 331px) {
    #plugin_list > li {
        width: 82.75px;
        height: 82.75px;
    }
}

@media screen and (width: 332px) {
    #plugin_list > li {
        width: 83px;
        height: 83px;
    }
}

@media screen and (width: 333px) {
    #plugin_list > li {
        width: 83.25px;
        height: 83.25px;
    }
}

@media screen and (width: 334px) {
    #plugin_list > li {
        width: 83.5px;
        height: 83.5px;
    }
}

@media screen and (width: 335px) {
    #plugin_list > li {
        width: 83.75px;
        height: 83.75px;
    }
}

@media screen and (width: 336px) {
    #plugin_list > li {
        width: 84px;
        height: 84px;
    }
}

@media screen and (width: 337px) {
    #plugin_list > li {
        width: 84.25px;
        height: 84.25px;
    }
}

@media screen and (width: 338px) {
    #plugin_list > li {
        width: 84.5px;
        height: 84.5px;
    }
}

@media screen and (width: 339px) {
    #plugin_list > li {
        width: 84.75px;
        height: 84.75px;
    }
}

@media screen and (width: 340px) {
    #plugin_list > li {
        width: 85px;
        height: 85px;
    }
}

@media screen and (width: 341px) {
    #plugin_list > li {
        width: 85.25px;
        height: 85.25px;
    }
}

@media screen and (width: 342px) {
    #plugin_list > li {
        width: 85.5px;
        height: 85.5px;
    }
}

@media screen and (width: 343px) {
    #plugin_list > li {
        width: 85.75px;
        height: 85.75px;
    }
}

@media screen and (width: 344px) {
    #plugin_list > li {
        width: 86px;
        height: 86px;
    }
}

@media screen and (width: 345px) {
    #plugin_list > li {
        width: 86.25px;
        height: 86.25px;
    }
}

@media screen and (width: 346px) {
    #plugin_list > li {
        width: 86.5px;
        height: 86.5px;
    }
}

@media screen and (width: 347px) {
    #plugin_list > li {
        width: 86.75px;
        height: 86.75px;
    }
}

@media screen and (width: 348px) {
    #plugin_list > li {
        width: 87px;
        height: 87px;
    }
}

@media screen and (width: 349px) {
    #plugin_list > li {
        width: 87.25px;
        height: 87.25px;
    }
}

@media screen and (width: 350px) {
    #plugin_list > li {
        width: 87.5px;
        height: 87.5px;
    }
}

@media screen and (width: 351px) {
    #plugin_list > li {
        width: 87.75px;
        height: 87.75px;
    }
}

@media screen and (width: 352px) {
    #plugin_list > li {
        width: 88px;
        height: 88px;
    }
}

@media screen and (width: 353px) {
    #plugin_list > li {
        width: 88.25px;
        height: 88.25px;
    }
}

@media screen and (width: 354px) {
    #plugin_list > li {
        width: 88.5px;
        height: 88.5px;
    }
}

@media screen and (width: 355px) {
    #plugin_list > li {
        width: 88.75px;
        height: 88.75px;
    }
}

@media screen and (width: 356px) {
    #plugin_list > li {
        width: 89px;
        height: 89px;
    }
}

@media screen and (width: 357px) {
    #plugin_list > li {
        width: 89.25px;
        height: 89.25px;
    }
}

@media screen and (width: 358px) {
    #plugin_list > li {
        width: 89.5px;
        height: 89.5px;
    }
}

@media screen and (width: 359px) {
    #plugin_list > li {
        width: 89.75px;
        height: 89.75px;
    }
}

@media screen and (width: 360px) {
    #plugin_list > li {
        width: 90px;
        height: 90px;
    }
}

#plugin_list .icon {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: no-repeat center 18%;
    background-size: 60%;
}

#plugin_list > #qzone > .icon {
    background-image: url(../image/plugin_icon_qzone.jpg);
}

#plugin_list > #qmail > .icon {
    background-image: url(../image/plugin_icon_qmail.jpg);
}

#plugin_list > #qq_portal > .icon {
    background-image: url(../image/plugin_icon_qq_portal.png);
}

#plugin_list > #soso_map > .icon {
    background-image: url(../image/plugin_icon_soso_map.jpg);
}

.plugin_displayer_container {
    position: relative;
}

#plugin_displayer {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%!important;
    width: 100%!important;
    border: 0 none;
}

.record_container {
    padding: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
}

.record_container .buddy, .record_container .me {
    margin-bottom: 10px;
}

.record_container dt {
    font-weight: 700;
    margin-bottom: 5px;
}

.record_container dt span {
    color: #a8a8a8;
    margin-left: 10px;
    font-size: 14px;
    font-weight: 400;
}

.record_container .buddy dt {
    color: #0d508f;
}

.record_container .me dt {
    color: #0c8b0c;
}

.record_toolbar_footer {
    height: 50px;
    text-align: center;
}

.record_pre_page, .record_next_page {
    font-weight: 700;
    color: #868686;
    font-size: 26px;
    line-height: 50px;
}

.record_pre_page {
    margin-right: 15px;
}

.record_next_page {
    margin-left: 15px;
}

.record_page_input {
    height: 1em;
    width: 2em;
}

.no_record {
    text-align: center;
}

.avatarimg {
    width: 100%;
    height: 100%;
    opacity: 0.8;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

.avataronline {
    width: 100%;
    height: 100%;
}

@media all and (min-width: 1000px) {
    .panel_body_container::-webkit-scrollbar-track {
        background: rgba(255,255,255,0)!important;
    }

    #panelBodyWrapper-5::-webkit-scrollbar-track {
        background: rgba(0,0,0,.5)!important;
    }

    .panel_body_container::-webkit-scrollbar {
        width: 10px;
    }

    .panel_body_container::-webkit-scrollbar-thumb {
        border-radius: 35px;
        background: rgba(0,0,0,.5)!important;
    }
}
